Skip to main content

App Shell

Catalyst offers an app shell, which serves as a wrapper around your page code, enabling you to perform common operations required for all pages. You can access the app shell inside the src/js/containers/App directory under the src folder.

All your pages will be rendered in this app shell. It will be the parent component for all your apps.

Outlet​

In React Router, an Outlet is a placeholder component used within a parent component to render child routes. It acts as the destination for nested route components, allowing for dynamic rendering of content based on the current URL path. Refer doc https://reactrouter.com/en/main/components/outlet for more information.

Catalyst uses React Router under the hood for routing. You can refer to the React Router documentation for more detailed information on routing concepts and APIs.

serverSideFunction​

The app shell provides you with a function called serverSideFunction, which you can use to perform any operations while rendering your page on the server. This function is similar to serverFetcher, which we define in the page component. The key distinction lies in the fact that serverSideFunction runs on each page request, whereas serverFetcher runs only when that specific page is requested.

src/js/containers/App/index.js
import React from "react"
import { Outlet } from "@tata1mg/router"

const App = () => {
    return (
        <>
            <Outlet />
        </>
    )
}

App.serverSideFunction = ({store, req, res}) => {
    return new Promise((resolve) => resolve())
}

export default App

serverSideFunction accepts an object as an argument, which contains following:

  • store: If you're using Redux or RTK template, in that case, the store will be passed as an argument.
  • req: request object represents the HTTP request received by a server, containing information about the incoming request such as headers, URL, query parameters, and body data. It's a node request object received for page.
  • res: response object represents the HTTP response sent by a server. It's a node response object sent to browser.

Returning a promise is essential in serverSideFunction to handle asynchronous behavior and manage the flow of execution in JavaScript.